<template>
  <div>
    <van-tabbar v-model="tabIndex"
                :fixed="false"
                style="height:65px;background-color:#e6d9d9;"
                @change="changeTab">
      <van-tabbar-item icon="smoke-sensor3">设备</van-tabbar-item>
      <van-tabbar-item icon="early-warning-tabbar">告警记录</van-tabbar-item>
    </van-tabbar>
    <div v-if="tabIndex==1">
      <div v-for="(alarmInfo, index) in alarmList"
           :key="index">
        <div class="alarmDetail-title">{{alarmInfo.alarmDetail}}</div>
        <van-cell-group>
          <van-cell title="告警类别">
            <span :style="{'color': alarmTypeColor(alarmInfo.alarmType)}">{{alarmTypeTxt(alarmInfo.alarmType)}}</span>
          </van-cell>
          <van-cell title="告警时间"
                    :value="alarmInfo.alarmDate" />
          <van-cell title="告警状态">
            <span :style="{'color':alarmStatColor(alarmInfo.alarmStat)}">{{alarmStatTxt(alarmInfo.alarmStat)}}</span>
          </van-cell>
          <van-cell title="确认类型"
                    :value="dealTypeTxt(alarmInfo.dealType)" />
          <van-cell title="确认方式"
                    :value="dealMethodTxt(alarmInfo.dealMethod)" />
          <van-cell title="处理结果"
                    :value="alarmInfo.dealResult"
                    type="textarea" />
        </van-cell-group>
      </div>
    </div>
    <div v-else>
      <van-cell-group :border="true">
        <van-cell class="device-item"
                  v-for="(device, index) in deviceList"
                  :key="index">
          <div class="deviceName">
            <van-icon name="smoke-sensor2" />
            &nbsp{{ device.devName }}
            <span :class="device.devStatus==1?'color-online':'color-offline'">&nbsp{{ device.devStatus==1?'在线':'离线' }}</span>
          </div>
          <div>{{ device.devModel }}，{{ device.imei }}</div>
          <div class="addr">{{ device.installAddr }}</div>
        </van-cell>
      </van-cell-group>
    </div>
  </div>
</template>

<script>
import { alarmInfo, getDevices } from './../../api/device'
export default {
  data() {
    return {
      tabIndex: 0,
      shopId: 0,
      alarmList: [],
      deviceList: [],
      dealTypeCombo: [
        { key: 1, name: '真实火警' },
        { key: 2, name: '误报' },
        { key: 3, name: '故障' },
        { key: 4, name: '测试' }
      ],
      dealMethodCombo: [
        { key: 1, name: '电话确认' },
        { key: 2, name: '视频确认' },
        { key: 3, name: 'app图片确认' },
        { key: 4, name: '自动确认' },
        { key: 5, name: '其他方式' }
      ],
      alarmTypeCombo: [
        { key: 0, value: '告警类型' },
        { key: 1, value: '离线' },
        { key: 2, value: '火警' },
        { key: 3, value: '传感器故障' },
        { key: 4, value: '拆除报警' },
        { key: 5, value: '低压报警' },
        { key: 6, value: '火警解除' },
        { key: 99, value: '未知' }
      ],
      alarmTypeColorList: [
        { key: 1, value: '#f16700' },
        { key: 2, value: '#e4393c' },
        { key: 3, value: '#00b711' },
        { key: 4, value: '#d3adf7' },
        { key: 5, value: '#495060' }
      ],
      alarmStatCombo: [
        { key: 0, value: '确认状态' },
        { key: 1, value: '未确认' },
        { key: 2, value: '已确认' }
      ],
      alarmStatColorList: [
        { key: 1, value: '#f54d50' },
        { key: 2, value: '#5cb85c' }
      ]
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.shopId = this.$route.query
    this.getAlarmInfo()
    this.getDevices()
  },
  activated() {},

  deactivated() {},

  methods: {
    async getAlarmInfo() {
      let res = await alarmInfo({ id: this.shopId })
      if (res.code === 0) {
        this.alarmList = res.data
      } else {
        this.$toast.fail(res.msg)
      }
    },
    async getDevices() {
      let res = await getDevices({ id: this.shopId })
      if (res.code === 0) {
        this.deviceList = res.data.records
      } else {
        this.$toast.fail(res.msg)
      }
    },
    alarmStatTxt(val) {
      if (val) {
        let alarmStat = val
        return this.alarmStatCombo.find(a => a.key == alarmStat).value
      } else {
        return ''
      }
    },
    alarmStatColor(val) {
      if (val) {
        let alarmStat = val
        return this.alarmStatColorList.find(a => a.key == alarmStat).value
      } else {
        return '#666'
      }
    },
    alarmTypeTxt(val) {
      if (val) {
        let alarmType = val
        return this.alarmTypeCombo.find(a => a.key == alarmType).value
      } else {
        return ''
      }
    },
    alarmTypeColor(val) {
      if (val) {
        let alarmType = val
        return this.alarmTypeColorList.find(a => a.key == alarmType).value
      } else {
        return '#666'
      }
    },
    dealTypeTxt(val) {
      if (val) {
        let dealType = val
        return this.dealTypeCombo.find(a => a.key == dealType).name
      } else {
        return ''
      }
    },
    dealMethodTxt(val) {
      if (val) {
        let dealMethod = val
        return this.dealMethodCombo.find(a => a.key == dealMethod).name
      } else {
        return ''
      }
    },
    changeTab() {}
  },

  components: {}
}
</script>


<style lang="scss" scoped>
@import './../../../../assets/scss/mixin';
.color-online {
  color: #19be6b;
}
.color-offline {
  color: #ed4014;
}
.alarmDetail-title {
  margin: 0;
  font-weight: 400;
  font-size: 14px;
  color: rgba(69, 90, 100, 0.6);
  padding: 20px 15px 15px;
}
.device-item {
  padding: 15px;
  .deviceName {
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
  }
  .addr {
    font-size: 12px;
    line-height: 16px;
    color: #666;
  }
}
</style>
